<template lang="html">
  <div class="profile">
    <v-content>
      <section>
        <v-parallax height="240">
          <v-layout column align-center justify-center class="white-text">
            <img src="https://cdn.vuetifyjs.com/images/lists/1.jpg">
            <p class="white--text mt-2 mb-2 text-xs-center" v-html="userInfo.name"></p>
            <span class="mb-3 text-xs-center" v-html="userInfo.FEmpRegion$"></span>
          </v-layout>
        </v-parallax>
      </section>
    </v-content>
    <v-content>
      <v-list two-line>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>fa-users</v-icon>
          </v-list-tile-action>

          <v-list-tile-content>
            <v-list-tile-title>职位</v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            <span v-html="userInfo.FPosition$"></span>
          </v-list-tile-action>
        </v-list-tile>
        <v-divider></v-divider>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>fa-lock</v-icon>
          </v-list-tile-action>

          <v-list-tile-content>
            <v-list-tile-title @click="changePassword">修改密码</v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            <v-icon>fa-chevron-right</v-icon>
          </v-list-tile-action>
        </v-list-tile>
        <v-divider></v-divider>
      </v-list>
    </v-content>
    <a class="logout" @click="logout">退出登录</a>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
computed: {
  ...mapGetters([
    'userInfo'
  ])
},
  methods: {
    logout() {
      this.$store.dispatch('logout').then((res) => {
        localStorage.setItem('autologin', 'false')
        this.$router.replace({path: '/login'})
      })
    },
    changePassword() {
      this.$router.push({
        path: "/password"
      })
    }
  }
}
</script>

<style lang="scss">
.profile {
  position: relative;
  height: 100%;

  .v-parallax {
    background: #006cc6;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);

    img {
      border-radius: 50%;
      width: 74px;
      height: 74px;
      border: 3px solid rgb(89, 159, 217);
    }

    p {
      font-size: 16px;
    }

    span {
      font-size: 14px;
    }
  }
  .logout {
    position: absolute;
    font-size: 15px;
    bottom: 5px;
    left: 50%;
    margin-left: -28px;
    color: rgb(102, 102, 102);
  }
}
</style>
